<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;	
		}
		.box {
			width: 500px;
			height: 300px;
	
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -255px;
			margin-top: -155px;
			padding: 10px;
		
		}
		.c1 {
			width: 80px;
			height: 80px;
			border: 10px solid #0000ff;
			border-radius: 50%;
			position: absolute;
			top: 80px;
			left: 100px;
		}
		.c2 {
			width: 80px;
			height: 80px;
			border: 10px solid #000000;
			border-radius: 50%;
			position: absolute;
			top: 80px;
			left: 210px;
		}
		.c3 {
			width: 80px;
			height: 80px;
			border: 10px solid #ff0000;
			border-radius: 50%;
			position: absolute;
			top: 80px;
			left: 320px;
		}
		.c4 {
			width: 80px;
			height: 80px;
			border: 10px solid yellow;
			border-radius: 50%;
			position: absolute;
			top: 130px;
			left: 155px;
		}
		.c5 {
			width: 80px;
			height: 80px;
			border: 10px solid #00ff00;
			border-radius: 50%;
			position: absolute;
			top: 130px;
			left: 265px;
		}
	</style>
</head>
<body>
	<div class="box">
			<div class="c1"></div>
			<div class="c2"></div>
			<div class="c3"></div>
			<div class="c4"></div>
			<div class="c5"></div>
	</div>
</body>
</html>